<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%
	String start = request.getParameter("start");
	String end = request.getParameter("end");
	String time = request.getParameter("time");
	String journey = request.getParameter("journey");
	
	if (start != null && end != null && time != null && journey != null && !start.equals("") && !end.equals("") && !time.equals("") && !journey.equals("")) {
		start = new String(start.getBytes("ISO-8859-1"), "UTF-8");
		end = new String(end.getBytes("ISO-8859-1"), "UTF-8");
		time = new String(time.getBytes("ISO-8859-1"), "UTF-8");
		journey = new String(journey.getBytes("ISO-8859-1"), "UTF-8");
	} else {
		out.print("<script>alert('잘 못된 값이 존재합니다.');history.back();</script>");
	}
%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>경로보기</title>

<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="assets/ico/favicon.png" />
<link rel="apple-touch-icon-precomposed"
	href="assets/ico/apple-touch-icon-57-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72"
	href="assets/ico/apple-touch-icon-72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114"
	href="assets/ico/apple-touch-icon-114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144"
	href="assets/ico/apple-touch-icon-144-precomposed.png" />

<!-- bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />

<!-- jquery-ui(popup) -->
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	
<!-- font-awesome 적용 -->
<link rel="stylesheet"
	href="assets/font-awesome-4.0.3/css/font-awesome.min.css" />

<!-- 반응형 웹을 지원하지 않을 경우 -->
<!-- <link rel="stylesheet" href="assets/css/non-responsive.css" /> -->

<!-- IE8 이하 버전 지원 -->
<!--[if lt IE 9]>
		<script type="text/javascript" src="assets/js/html5shiv.js"></script>
		<script type="text/javascript" src="assets/js/respond.min.js"></script>
		<![endif]-->

<!-- IE10 반응형 웹 버그 보완 -->
<!--[if gt IE 9]>
		<link rel="stylesheet" type="text/css" href="assets/css/ie10.css" />
		<script type="text/javascript" src="assets/js/ie10.js"></script>
		<![endif]-->
<style>

nav.navbar {
	line-height: 50px;
}

.navbar span {
	color: #FFFFFF;
	font-size: 16px;
}

.nav_btns {
	width: 50px;
}

html,body,#map-canvas {
	height: 100%;
	margin: 0px;
	padding: 0px
}

#panel {
	position: absolute;
	top: 5px;
	left: 50%;
	margin-left: -180px;
	z-index: 5;
	background-color: #fff;
	padding: 5px;
	border: 1px solid #999;
}

.gmnoprint {
	display : none;
}

/* 상단 바 스타일 속성 */
.nav_content {
	position: relative;
	max-width: 737px;
	margin: auto;
	padding-left: 5px;
	padding-right: 5px;
}

.submit_btn {
	position: fixed;
	width: 50px;
	line-height: 50px;
	font-size: 18px;
	right: 5px;
	z-index: 10000;
}

nav.navbar {
	line-height: 50px;
	background-color: #000000;
	border-bottom: 1px solid #4F2B00;
	opacity: 0.7;
	z-index: 500;
}

.submit_btn a {
	color: #ffffff !important;
}

.submit_btn a:hover {
	color: #333 !important;
	font-weight: 700;
}

@media ( min-width : 521px) {
	.page_title {
		position: fixed;
		left: 15px;
		top: 10px;
		font-size: 20px;
		color: #ffffff;
		z-index: 10000;
	}
	
	.sel-station {
		font-size: 16px;
	}
} 

@media (max-width : 520px) {
	.page_title {
		position: fixed;
		left: 15px;
		top: 3px;
		font-size: 14px;
		color: #ffffff;
		z-index: 10000;
	}
	
	.sel-station {
		font-size: 12px;
	}
	
	.loc_group {
		display: block;
	}
}
/* 상단 바 스타일 속성 끝 */
</style>
</head>
<body>
	<!-- 상단 해더 바 -->
			<nav class="navbar navbar-fixed-top" role="navigation">
</nav> <!--네비게이션바 끝-->
<div class="page_title">
	<span class="loc_group">
		<span class="label label-warning">출발지</span>
		<span id="dep_st" class="sel-station">값 없음</span>
	</span>
	<span class="loc_group">
		<span class="label label-danger">도착지</span>
		<span id="arr_st" class="sel-station">값 없음</span>
	</span>
	
</div>
<div class="submit_btn pull-right text-center">
	<a href="javascript:history.back();">완료</a>
</div>
	<!-- 상단 해더 끝 -->

	<div id="map-canvas"></div>

	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script
		src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script>
		var directionsDisplay;
		var directionsService = new google.maps.DirectionsService();
		var map;
		function initialize() {
			directionsDisplay = new google.maps.DirectionsRenderer();
			var chicago = new google.maps.LatLng(<%=start%>);
			var mapOptions = {
				zoom : 7,
				center : chicago
			};
			map = new google.maps.Map(document.getElementById('map-canvas'),
					mapOptions);
			directionsDisplay.setMap(map);
			calcRoute();
		}
		
		
		
		function calcRoute() {
			var time = new Date(<%=time%>);
			var request = {
				origin : '<%=start%>',
				destination : '<%=end%>',
				travelMode : google.maps.TravelMode.TRANSIT,
				transitOptions : {
					departureTime : time
				},
				provideRouteAlternatives : true
			};
			directionsService.route(request, function(response, status) {
				if (status == google.maps.DirectionsStatus.OK) {
					response.routes[0] = response.routes[<%=journey%>];
					directionsDisplay.setDirections(response);
				}
			});
		}
		google.maps.event.addDomListener(window, 'load', initialize);
		
		$('#dep_st').html(sessionStorage["sl"]);
		$('#arr_st').html(sessionStorage["el"]);
	</script>
	
	
</body>
</html>